<!DOCTYPE html>

<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->

<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->

<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

<!-- BEGIN HEAD -->

<head>

	<meta charset="utf-8" />

	<title><{:L('hjjp_title')}> | <{:L('foodinformation')}> | <{:L('foodsauce')}></title>

	<meta content="width=device-width, initial-scale=1.0" name="viewport" />

	<meta content="" name="description" />

	<meta content="" name="author" />

	<!-- BEGIN GLOBAL MANDATORY STYLES -->

	<link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/style-metro.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/style.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/style-responsive.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/<{$ctype}>.css" rel="stylesheet" type="text/css" id="style_color"/>

	<link href="__PUBLIC__/css/uniform.default.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/scojs.css" rel="stylesheet" type="text/css"/>
	<!-- END GLOBAL MANDATORY STYLES -->

	<!-- BEGIN PAGE LEVEL STYLES -->


	<link rel="stylesheet" href="__PUBLIC__/css/DT_bootstrap.css" />
	
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/jquery-ui-1.10.1.custom.min.css" />

	<link href="__PUBLIC__/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>

	<!-- END PAGE LEVEL STYLES -->

	<link rel="shortcut icon" href="__PUBLIC__/image/favicon.ico" />

</head>

<!-- END HEAD -->

<!-- BEGIN BODY -->

<body class="page-header-fixed">
	
	<include file="Public/header" />

	  	<include file="Public/nav" />
	  	
			<!-- BEGIN PAGE TITLE & BREADCRUMB-->

						<h3 class="page-title">

							<{:L('foodinformation')}> <small><{:L('foodsauce')}><{:L('mangage')}></small>

						</h3>

						<ul class="breadcrumb">

							<li>

								<i class="icon-home"></i>

								<a href="__ROOT__/Index/index.html"><{:L('home')}></a> 

								<i class="icon-angle-right"></i>

							</li>

							<li>

								<a href="#"><{:L('foodinformation')}></a>

								<i class="icon-angle-right"></i>

							</li>

							<li><a href="#"><{:L('foodsauce')}></a></li>

						</ul>

						<!-- END PAGE TITLE & BREADCRUMB-->

					</div>

				</div>

				<!-- END PAGE HEADER-->

				<!-- BEGIN PAGE CONTENT-->

				<div class="row-fluid">

					<div class="span12">
						
						<div class="portlet box light-grey">

							<div class="portlet-title">

								<div class="caption"><i class="icon-cogs"></i><{:L('foodsauce')}></div>

								<div class="tools">

									<a href="javascript:;" class="collapse"></a>

									<a href="javascript:;" class="reload"></a>

								</div>

							</div>

							<div class="portlet-body">

								<div class="clearfix">

									<div class="btn-group">

										<button id="create-act" class="btn green">

										<{:L('create')}> <i class="icon-plus"></i>

										</button>

									</div>

								</div>

								<table class="table table-striped table-bordered table-hover table-full-width" id="sauce_table">

									<thead>

										<tr>

											<th class="span2"><{:L('number')}></th>

											<th><{:L('name')}></th>

											<th class="span2"><{:L('price')}></th>

											<th class="span2"><{:L('sequence')}></th>

											<th class="span2"><{:L('visible')}></th>

											<th class="span2"><{:L('act')}></th>

										</tr>

									</thead>

									<tbody>
										
										<foreach name="saucelist" item="sauce">

										<tr >

											<td><{$sauce.id}></td>

											<td><{$sauce.name}></td>

											<td><{$sauce.price}></td>

											<td><{$sauce.sequence}></td>

											<td>
												<input type="hidden" name="visualable" value="<{$sauce.visible}>" />
												<if condition="$sauce.visible eq 'v'">
													<span><{:L('yes')}></span>
												<elseif condition="$sauce.visible eq 'n'" />
													<span class="red"><{:L('no')}></span>
												<else />
													<span class="red"><{:L('notsale')}></span>
												</if>
											</td>
											
											<td>
													
													<a href="#" class="btn blue icn-only">
														
														<i class="icon-edit"></i>
														
													</a>
													
													
													<a href="#" class="btn red icn-only">
														
														<i class="icon-remove icon-white"></i>
														
													</a>
												
											</td>

										</tr>
										
										</foreach>

									</tbody>

								</table>

							</div>

						</div>

						<!-- END EXAMPLE TABLE PORTLET-->
						
						<!-- BEGIN EDIT MODAL-->

						<div id="editmodal" class="modal hide fade" tabindex="-1" data-width="640">

							<form id="modalform" action="#" class="form-horizontal">

								<div class="modal-header">
	
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
	
									<h3><{:L('foodsauce')}><{:L('edit')}></h3>
	
								</div>
	
								<div class="modal-body">
	
									<div class="row-fluid">
	
										<div class="span12">
												
												<div class="alert alert-error hide">
	
													<button class="close" data-dismiss="alert"></button>
			
													<{:L('formerror')}>
			
												</div>
												
												<div class="control-group hide">
	
													<label class="control-label"><{:L('number')}></label>
			
													<div class="controls">
			
														<input id="sauceid" class="span6 m-wrap" type="text" name="sauceid" placeholder="<{:L('readonly')}>" readonly="" />
			
														<span class="help-inline"><{:L('idhint')}></span>
			
													</div>
			
												</div>
												
												<div class="control-group">
	
													<label class="control-label"><{:L('foodsauce')}><{:L('name')}><span class="required">*</span>:</label>
			
													<div class="controls">
			
														<input type="text" id="saucename" name="saucename" class="span6 m-wrap popovers" data-required="1"  data-trigger="hover" data-content="<{:L('namehint')}>" data-original-title="<{:L('inputtips')}>" />
			
													</div>
			
												</div>
												
												<div class="control-group">
	
													<label class="control-label"><{:L('price')}><span class="required">*</span>:</label>
			
													<div class="controls">
			
														<input type="text" id="price" name="price" class="span6 m-wrap popovers"  data-trigger="hover" data-content="<{:L('goodsprice')}>" data-original-title="<{:L('inputtips')}>" />
			
													</div>
			
												</div>
												
												<div class="control-group">
	
													<label class="control-label"><{:L('sequence')}>:</label>
			
													<div class="controls">
			
														<input type="text" id="saucesequence" name="saucesequence" class="span6 m-wrap popovers"  data-trigger="hover" data-content="<{:L('sequencenumber')}>" data-original-title="<{:L('inputtips')}>" />
			
													</div>
			
												</div>
												
												<div class="control-group">
	
													<label class="control-label"><{:L('visible')}>:</label>
			
													<div class="controls">
			
														<label class="radio">
			
														<input type="radio" name="visible" data-default="true" value="v" checked="" />
			
														<{:L('yes')}>
			
														</label>
			
														<label class="radio">
			
														<input type="radio" name="visible" value="n" />
			
														<{:L('no')}>
			
														</label>
			
														<label class="radio">
			
														<input type="radio" name="visible" value="ns" />
			
														<{:L('notsale')}>
			
														</label>
			
													</div>
			
												</div>
													
										</div>
	
									</div>
	
								</div>
	
								<div class="modal-footer form-actions">
									
									<input type="hidden" value="" id="actionType" />
	
									<button type="button" data-dismiss="modal" class="btn"><{:L('cancle')}></button>
	
									<button type="submit" class="btn blue"><{:L('save')}></button>
	
								</div>
								
							</form>

						</div>
							
						<!-- BEGIN EDIT MODAL-->
						
					</div>

				</div>
				<!-- END PAGE CONTENT-->

			</div>

			<!-- END PAGE CONTAINER-->

		</div>

		<!-- END PAGE -->

	</div>

	<!-- END CONTAINER -->
	
	<include file="Public/footer" />
	
	<!-- BEGIN PAGE LEVEL PLUGINS -->

	<script type="text/javascript" src="__PUBLIC__/js/jquery.dataTables.js"></script>

	<script type="text/javascript" src="__PUBLIC__/js/DT_bootstrap.js"></script>

	<!-- END PAGE LEVEL PLUGINS -->

	<!-- BEGIN PAGE LEVEL SCRIPTS -->

	<script src="__PUBLIC__/js/app.js"></script>

	<script src="__PUBLIC__/js/table-basic.js"></script>
	   

	<script>

		jQuery(document).ready(function() {       

		   App.init();

		   TableBasic.init('sauce_table', [6, 3, [0, 2, 3]]);
		   
		   AjaxModal.init('editmodal', 'Food', 'sauce', {
		   		saucename: {
                    minlength: 1,
                    required: true
                },
                saucesequence: {
                    digits: true,
                    range: [1, 100]
                },
                price: {
                    digits: true,
                    required: true
                }
		   });
		   
		   $("#sauce_table").delegate("a", "click", function(event){
				var targetNode = event.srcElement || event.target;
				var targetObj = $(targetNode);
				if(!targetObj.hasClass("btn")){
					targetObj = targetObj.parent();
				}
				if(targetObj.hasClass("blue")){
					$("#sauceid").val(targetObj.parent().parent().find("td").eq(0).html());
					$("#saucename").val(targetObj.parent().parent().find("td").eq(1).html());
					$("#price").val(targetObj.parent().parent().find("td").eq(2).html());
					$("#saucesequence").val(targetObj.parent().parent().find("td").eq(3).html());
					$("#editmodal").find("input[type=radio][name=visible]").each(function(){
		 				if($(this).val() == targetObj.parent().parent().find("td").eq(4).find("input").val()){
		 					$(this).parent().addClass("checked");
		 				}else{
		 					$(this).parent().removeClass("checked");
		 				}
		 			});
					$("#actionType").val("edit");
					$('body').modalmanager('loading');
					setTimeout(function(){
					    $("#editmodal").modal();
					}, 500);
				}else if(targetObj.hasClass("red")){
					var confirm = $.scojs_confirm({
						content: "<{:L('sureDelete')}>",
						action: function() {
						    deleteAction("Food", {id : targetObj.parent().parent().find("td").eq(0).html(), method: "sauce"});
						}
					});
					confirm.show();
				}
			});
		   
		});

	</script>
	

<script type="text/javascript">  
//var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-37564768-1']);  _gaq.push(['_setDomainName', 'keenthemes.com']);  _gaq.push(['_setAllowLinker', true]);  _gaq.push(['_trackPageview']);  
//(function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();
</script>

</body>

<!-- END BODY -->

</html>